<template>
  <el-dialog
    title="请假申请"
    :visible.sync="isShowDialog"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <div class="form-container">
      <el-form :model="qingJia" ref="childForm" label-width="80px" :rules="rules">
        <el-form-item label="申请人">
          <el-input readonly v-model="qingJia.qingJiaRenName"></el-input>
        </el-form-item>
        <el-form-item prop="qjtype" label="请假类型">
          <el-select v-model="qingJia.qjtype">
            <el-option v-for="(item,index) in qingJiaTypes" :value="item.value" :label="item.label"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="qjstime" label="开始时间">
          <el-date-picker
            style="width: 100%"
            v-model="qingJia.qjstime"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="qjetime" label="结束时间">
          <el-date-picker
            style="width: 100%"
            v-model="qingJia.qjetime"
            type="datetime"
            placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="qjyy" label="请假原因">
          <el-input type="textarea" :rows="5" v-model.trim="qingJia.qjyy"></el-input>
        </el-form-item>

        <el-form-item label="相关附件">
          <el-upload
            class="upload-demo"
            action="http://192.168.0.102:8002/api/fileUpload/upload?fileType=QinJiaFile"
            multiple
            :limit="10"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :file-list="uploadFileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">文件大小请勿超过2MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item prop="auditorIdList" label="审批人" style="margin-bottom: 0">
          <el-select v-model="qingJia.auditorIdList" multiple>
            <el-option v-for="item in userList" :value="item.userId" :label="item.userNickname"
                       :key="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <p class="tip">审批顺序依照人员选择顺序</p>
        <p class="tip-2" v-if="qingJia.qingJiaId">注：修改后不保留以前的审批人及意见</p>
      </el-form>
    </div>
    <div slot="footer">

      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm">重 置</el-button>
      <el-button
        type="success"
        @click="submitForm"
        :loading="changeLoading">提 交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import qingJiaAPI from '@/api/qingJia/qingJia'
  import userAPI from '@/api/system/user'
  import { mapGetters } from 'vuex'

  export default {
    name: 'QingJiaSave',
    data() {
/*      const dateValid = (rule, value, callback) => {
        if (this.qingJia.qjstime && this.qingJia.qjetime) {
          if (this.qingJia.qjetime < this.qingJia.qjstime) {
            callback(new Error('请假结束时间不能早于开始时间'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }*/
      return {
        qingJia: {
          auditorIdList: [],
          qjetime: '',
          qjstime: '',
          qjtype: '事假',
          qjyy: '',
          qingJiaRenId: this.userId,
          qingJiaId: '',
          qingJiaRenName: '',
          stateName: '',
          fileList:[]
        },
        qingJiaTypes: [
          { value: '事假', label: '事假' },
          { value: '病假', label: '病假' },
          { value: '年假', label: '年假' },
          { value: '其他', label: '其他' }
        ],

        rules: {
          qjyy: [
            { required: true, message: '请输入请假原因', trigger: 'blur' }
          ],
          qjstime: [
            { required: true, message: '请选择请假开始时间', trigger: 'change' },
            // { validator: dateValid, trigger: 'change' }
          ],
          qjetime: [
            { required: true, message: '请选择请假结束时间', trigger: 'change' },
            // { validator: dateValid, trigger: 'change' }
          ],
          auditorIdList: [
            { required: true, message: '请选择审批人', trigger: 'change' }
          ]

        },
        isShowDialog: false,
        userList: [],
        departmentList: [],
        changeLoading: false,
        uploadFileList:[]
      }
    },
    computed: {
      ...mapGetters([
        'userId',
        'username',
      ])
    },
    created() {
      this.getUserList()
      this.qingJia.qingJiaRenName = this.username
    },
    methods: {
      close() {
        this.resetForm()
        this.isShowDialog = false
      },
      getUserList() {
        userAPI.getList('', '', 1, 100).then(res => {
          this.userList = res.records
        })
      },
      saveOrUpdate() {
        this.changeLoading = true
        const promise = this.qingJia.qingJiaId ? qingJiaAPI.edit(this.qingJia) : qingJiaAPI.save(this.qingJia)
        promise.then(res => {
          this.changeLoading = false
          this.$message.success('提交成功')
          this.$emit('update')
          this.isShowDialog = false
          this.resetForm()
        })
      },
      beforeClose(done) {
        this.resetForm()
        done(true)
      },

      open(id) {
        console.log(id)
        this.isShowDialog = true
        if(!id){
          // this.qingJia.qjstime = this.qingJia.qjetime = new Date()
        }else{
          /*qingJiaId: "32C37587-E814-47C0-A8CF-270F2387EE3F"
qingJiaRenId: 519
qingJiaRenName: "梅林辉"
qjstime: "2020-06-24T07:33:00"
qjetime: "2020-06-24T07:33:25.687"
qjtype: "事假"
qjyy: "第三方撒打发士大夫"
stateName: "已审批"
auditor: 519
fileList: []*/
          qingJiaAPI.getById(id).then(res=>{
            console.log(res)
            console.log('res:',res.qjyy)
            /*this.qingJia.qjstime = res.qjstime
            this.qingJia.qjetime = res.qjetime
            this.qingJia.qjyy = res.qjyy
            this.qingJia.qingJiaId = res.qingJiaId
            this.qingJia.qingJiaRenName = res.qingJiaRenName*/
            this.qingJia = res
          })
        }
      },
      resetForm() {
        this.$refs['childForm'].resetFields()
        if (this.qingJia.qjstime || this.qingJia.qjetime) {
          this.qingJia.qjstime = ''
          this.qingJia.qjetime = ''
        }
      },
      submitForm() {
        this.$refs['childForm'].validate(valid => {
          if (valid && !this.changeLoading && this.checkDate()) {
            this.saveOrUpdate()
          }
        })
      },
      checkDate(){
        if(new Date(this.qingJia.qjetime) < new Date(this.qingJia.qjstime)){
          this.$message.info('结束时间不能早于开始时间')
          return false
        }
        return true
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.info('文件大小请勿超过 2MB!')
        }
        return isLt2M
      },
      uploadSuccess(res, file){
        this.qingJia.fileList.push(res.result)
      }
    }
  }
</script>

<style scoped lang="scss">
  .tip {
    font-size: 13px;
    color:gray;
    padding-left: 80px;
    margin-top: 20px;
    text-align: right;
  }

  .tip-2 {
    text-align: right;
    font-size: 13px;
    color:red;
    margin-top: 20px;
  }
</style>
